<template>
	<view class="contont">
		<view class="rgba-back">
			<!-- 头部导航 -->
			<top-tabtar tabTitle="个人作品"  @backClick="backClick">
				<view class="iconfont" slot="tab-right" style="font-size: 48rpx;" @click="shareLink">&#xe65e;</view>
			</top-tabtar>
			<!-- 主体内容 -->
			<view class="main">
				<view class="atten-img-box">
					<view class="img-box">
						<image :src="userData.avartImg"  mode="aspectFill"  v-if="userData.avartImg" class="img"></image>
						<image  mode="aspectFill" src="@/static/home/celebrity.jpeg"  v-else class="img"></image>
					</view>
					<!-- <view class="attention">关注Ta</view> -->
				</view>
				<view class="user-box">
					<view class="item-name-text-inoc">
						<view class="user-name">{{userData.nick}}</view>
					<!-- 	<view class="item-gender-age">
							<view class="gender">{{userData.sex ? "女" : "男"}}</view>
							<view class="gender age">24</view>
						</view> -->
						<view class="describe">{{userData.describe}}</view>
						<view class="pay-bean-production">
							<view>
								<text class="item-num">{{socialData.followCount}}</text><text class="item-text">关注</text>
							</view>
							<view>
								<text class="item-num">{{socialData.fansCount}}</text><text class="item-text">粉丝</text>
							</view>
							<view>
								<text class="item-num">{{socialData.worksCount}}</text><text class="item-text">作品</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 所有作品 -->
				<view>
					<view class="all-title">所有作品<text>（</text><text class="all-num">{{socialData.worksCount}}</text><text>）</text></view>
				</view>
				<scroll-view scroll-y="true" refresher-enabled="true" class="sv" :refresher-threshold="100"
					 @scrolltolower="scrollBottom" :style="{height:navHeight+'px'}">
					<view class="all-product">
						<view class="all-img-list" v-for="(item,index) in videoList" :key="index" @click="videoDetail(item.furl,item.vid)">
							<view class="all-img-box"><image :src="item.furl" mode="aspectFill"></image></view>
							<view class="text">{{ item.vtitle }}</view>
						</view>
					</view>
					<uni-load-more style="padding: 20rpx;" v-if="videoList.length > 9 || videoList.length == 9" :status="loadingType" iconType="auto"></uni-load-more>
				</scroll-view>
			</view>
		</view>
		<!-- 分享 -->
		<uni-popup  ref="popup" type="bottom">
			<view class="popup-main">
				<view class="title">分享到</view>
				<view class="img-list">
					<view class="img-name-box" @click="clickSearc">
						<image class="img" src="/static/home/copylink.png"></image>
						<view class="name">复制链接</view>
					</view>
				</view>
				<view class="footer-btn" @click="$refs.popup.close()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import topTabtar from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '../../network/api.js'
	export default {
		components: { topTabtar },
		data() {
			return {
				promotionLink: "", // 链接
				loadingType: 'loading', // 加载更多状态
				navHeight: 0, // 我的作品高度
				dataLength: 0, // 数据长度，用于分页
				videoUpload: { // 我的作品参数
					account: '', // 登录人账号
					pageNum: 1,
					pageSize: 9,
					status: 8 // 上传状态  待审核=1，审核中=2，已完成=9，已上架=8，已下架=11，0=全部
				},
				socialData: { // 社交数据
					followCount: 0, // 关注
					fansCount: 0, // 粉丝
					worksCount: 0 // 作品
				},
				userData: uni.getStorageSync('user_key'), // 获取个人信息
				videoList: [],  // 我的作品数据
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
				screenHeightTab: uni.getSystemInfoSync().screenHeight*0.81752 // 屏幕高度
			}
		},
		onReady(){
			this.getHight() // 获取高度
		},
		onLoad() {
			this.getProduction() // 获取关注数-粉丝-作品
			this.getUploadList() // 我的作品
		},
		methods: {
			// 复制链接
			clickSearc(index) {
				const vm = this
					uni.setClipboardData({
					    data: vm.promotionLink,
					    success: function () {
					      uni.showToast({	title:'复制成功',icon:'none' })
								vm.$refs.popup.close()
					    }
					})
			},
			// 打开弹窗-获取推广码链接
			async shareLink() {
				this.$refs.popup.open()
				const res = await $POST("/boke-user/extension/promotionLink")
				this.promotionLink = res.data.promotionLink
			},
			// 跳视频详情
			 videoDetail(url,id) {
				uni.navigateTo({
					url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
				})
			 },
			// 滚动到底部
			scrollBottom() {
				this.videoUpload.pageNum = this.videoUpload.pageNum +1
				if(this.dataLength < 9) {
					this.loadingType='nomore'
					return
				}
				this.getUploadList() 
			},
			// 获取设备高度
			getHight() {
				const vm = this;
				uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
					success(res) { //成功回调函数
						let windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
						let titleH = uni.createSelectorQuery().select(".sv")
						titleH.boundingClientRect(data=>{
							vm.navHeight = windowHeight - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						}).exec()
					}
				})
			},
			// 我的作品
			getUploadList() {
				 this.videoUpload.account = this.userData.account // 账号赋值
				$POST("/boke-user/myVideoUpload/list",this.videoUpload).then(res => {
					this.dataLength = res.data.length // 数据长度用于分页
					this.videoList = [...this.videoList,...res.data] // 数据赋值列表
				})
			},
			// 获取关注数-粉丝-作品
			async getProduction() {
				const res = await $POST("/boke-user/user/personalSocialInfo",{
					account: this.userData.account,
					userId: this.userData.id
				})
				this.socialData.followCount = res.data.followCount // 关注数
				this.socialData.fansCount = res.data.fansCount // 粉丝数
				this.socialData.worksCount = res.data.worksCount // 作品数
			},
			// 返回上一页
			backClick() {
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contont{
		
		.rgba-back{
			width: 100%;
			height: 360rpx;
			background: url("~@/static/my/works_b.jpeg");
			background-repeat:no-repeat; 
			background-size:100% 100%;
			-moz-background-size:100% 100%;
			.main{
				margin-top: 120rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0;
				padding: 0 26rpx 25rpx 26rpx;
				.atten-img-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 8rpx 17rpx 25rpx;
					.img-box{
						width: 138rpx;
						height: 135rpx;
						border-radius: 50%;
						margin-top: -68rpx;
						.img{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.attention{
						display: inline-block;
						padding: 8rpx 24rpx;
						background: linear-gradient(90deg, #B83DF1, #852CAE);
						border-radius: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.user-box{
					border-bottom: 1px solid #F2F2F2;
					.item-name-text-inoc{
						padding: 0 14rpx;
						.user-name{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 600;
							color: #333333;
						}
						.item-gender-age{
							display: flex;
							align-items: center;
							margin: 20rpx 0;
							.gender{
								display:inline-block;
								padding: 5rpx 30rpx;
								background: rgba(91, 33, 119, 0.3);
								border-radius: 20rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								color: #5B2177;
							}
							.age{
								margin-left: 14rpx;
							}
						}
						.describe{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.pay-bean-production{
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 37rpx 0 46rpx 0;
							.item-num{
								font-size: 36rpx;
								font-family: PingFang SC;
								font-weight: 600;
								color: #333333;
								margin-right: 17rpx;
							}
							.item-text{
								font-size: 24rpx;
								font-family: PingFang SC;
								color: #666666;
							}
						}
					}
				}
				// 所有作品
				.all-title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
					padding: 30rpx 0;
					.all-num{
						color: #FF7D36;
					}
				}
				.all-product{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.all-img-list:nth-child(3n) {
					 margin-right: 0 !important;
					}
					.all-img-list{
						width: 220rpx;
						margin: 0 19rpx 33rpx 0;
						.all-img-box{
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
						}
						.text{
							font-size: 26rpx;
							font-weight: 400;
							color: #000000;
							margin-top: 20rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
				}
			}
		}
		// 弹窗
		.popup-main{
			width: 100%;
			// height: 524rpx;
			background: #FFFFFF;
			padding: 0 40rpx;
			box-sizing: border-box;
			// margin-bottom: env(safe-area-inset-bottom);
			padding-bottom: 30rpx;
			.title{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #828282;
				padding: 20rpx 0;
				text-align: center;
			}
			.img-list{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				.img-name-box:nth-child(4n) {
					margin-right:0 !important;
				}
				.img-name-box{
					margin: 0 90rpx 30rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.img{
						width: 82rpx;
						height: 82rpx;
					}
					.name{
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #828282;
						margin-top: 18rpx;
					}
				}
			}
			.footer-btn{
				width: 100%;
				height: 91rpx;
				background: linear-gradient(90deg, #B83DF1, #852CAE);
				border-radius: 10rpx;
				line-height: 91rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
				box-sizing: border-box;
				// margin-top: 30rpx;
				margin-bottom:  env(safe-area-inset-bottom);
			}
		}
	}
</style>
